<template>
  <div class="MyView" @scroll="gradient">
    <!-- 顶部 -->
    <div class="myhead"><span>老苏</span>
      <div class="envelope"> <i class="iconfont icon-xinfeng"></i></div>
    </div>
    <!-- 头像 -->
    <div class="myavatar">
      <div class="photo">
        <div><img src="../assets/4.jpg" alt=""></div>
        <span>老苏</span>
      </div>
    </div>
    <!-- 小记部分 -->
    <div class="mybody">
      <div class="myxiaoji">
        <div class="myxiaoji-one">我的小记</div>
        <div>全部&nbsp;></div>
      </div>
      <div class="makexiaoji">
        <p>
          <i class="iconfont icon-qianbi"></i>
          <span>制作小记</span>
        </p>
        <p>记录你此刻的想法</p>
      </div>
      <p class="collection">我的收藏</p>
      <ul class="myxiaoji-two">
        <li>
          <i class="iconfont icon-riqian"></i>
          <p>日签</p>
        </li>
        <li>
          <i class="iconfont icon-yuedu"></i>
          <p>阅读</p>
        </li>
        <li>
          <i class="iconfont icon-wenda"></i>
          <p>问答</p>
        </li>
        <li>
          <i class="iconfont icon-a-reading"></i>
          <p>长篇</p>
        </li>
        <li>
          <i class="iconfont icon-shouyinji"></i>
          <p>收音机</p>
        </li>
      </ul>
    </div>
    <div class="interval"></div>
    <!-- 底部功能 -->
    <div class="myfunction">
      <ul>
        <li>
          <i class="iconfont icon-lishi"></i>
          <div>
            <span>浏览历史</span>
            <span>></span>
          </div>

        </li>
        <li>
          <i class="iconfont icon-wodeguanzhu"></i>
          <div>
            <span>我的关注</span>
            <span><span>0</span>&nbsp;></span>
          </div>

        </li>
        <li>
          <i class="iconfont icon-zhenggaotougao"></i>
          <div>
            <span>投稿</span>
            <span>></span>
          </div>

        </li>
        <li>
          <i class="iconfont icon-guanzhu06"></i>
          <div>
            <span>关注我们</span>
            <span>></span>
          </div>

        </li>
        <li>
          <i class="iconfont icon-shezhi"></i>
          <div>
            <span>设置</span>
            <span>></span>
          </div>

        </li>

      </ul>
    </div>
    <!-- 垫底 -->
    <div class="bottom"></div>
  </div>
</template>

<script>

export default {
  setup() {
    let gradient = (e) => {
      const scrollTop = e.target.scrollTop; // 获取页面的滚动位置
      const myhead = document.querySelector('.myhead');
      console.log(scrollTop);
      // 根据滚动位置动态调整背景颜色的透明度
      const maxScroll = 50; // 最大滚动距离
      const opacity = 1 - (scrollTop / maxScroll); // 计算透明度
      // 设置背景颜色，透明度在 0 到 1 之间
      myhead.style.backgroundColor = `rgba(112, 112, 112, ${opacity > 0 ? 1 - opacity : 1})`;
    }
    return { gradient }
  }
}
</script>

<style lang="scss" scoped>
.MyView {
  width: 375rem;
  height: 100vh;
  overflow-y: auto;

  /* 允许垂直滚动 */
  // 顶部
  .myhead {
    width: 375rem;
    height: 50rem;
    position: fixed;
    z-index: 1;
    font-size: 16rem;
    text-align: center;
    line-height: 50rem;

    .envelope {
      position: absolute;
      width: 40rem;
      // background-color: pink;
      top: 5rem;
      right: 15rem;

      i {
        font-size: 40rem;
        object-fit: cover;
      }
    }
  }

  // 头像
  .myavatar {
    width: 375rem;
    height: 160rem;
    position: relative;
    // background-color: aqua;

    .photo {
      position: absolute;
      bottom: 15rem;
      left: 15rem;
      display: flex;

      div {
        width: 80rem;
        height: 80rem;
        border-radius: 50%;
        overflow: hidden;

        i {
          font-size: 80rem;
        }
      }

      span {
        font-size: 16rem;
        margin-left: 20rem;
        line-height: 80rem;
      }
    }


  }

  // 小记部分
  .mybody {
    width: 375rem;
    height: 270rem;
    // background-color: aquamarine;
    font-size: 16px;
    padding: 15rem;

    .collection {
      padding-bottom: 10rem;
    }


    .myxiaoji {
      display: flex;
      justify-content: space-between;
      color: #c3c3c3;

      .myxiaoji-one {
        font-size: 20rem;
        color: black;
      }
    }

    .makexiaoji {

      text-align: center;
      width: 150rem;
      height: 100rem;
      border: 1px dashed #c3c3c3;
      border-radius: 10px;
      margin: 15rem auto;
      padding-top: 30rem;

      span {
        font-size: 20rem;
      }

      i {
        display: inline;
        font-size: 30rem;
        color: #b9b9b9;
      }

      p {
        font-size: 12rem;
        color: #b9b9b9;
      }
    }

    ul {
      display: flex;

      li {
        flex: 1;
        text-align: center;

        i {
          color: #b9b9b9;
          font-size: 40rem;
        }
      }
    }
  }

  // 底部功能
  .myfunction {
    width: 375rem;
    height: 300rem;
    font-size: 16rem;
    // background-color: pink;
    margin-top: 15rem;

    ul {
      li {
        display: flex;
        justify-content: space-between;
        padding: 10rem 0;

        i {
          font-size: 30rem;
          margin-left: 15rem;
          object-fit: cover;
        }

        div {
          padding-right: 15rem;
          width: 315rem;
          display: flex;
          justify-content: space-between;
          font-size: 18rem;
          border-bottom: 1px solid #c3c3c3;
          padding-bottom: 15rem;

        }
      }
    }
  }

  .interval {
    margin-top: 10rem;
    width: 375rem;
    height: 10rem;
    background-color: #c3c3c3;
  }

  .bottom {
    width: 375rem;
    height: 50rem;
  }
}
</style>